/**
 * 课程时间表组件
 * 用于展示和管理课程的时间安排，包括：
 * - 课程预约功能
 * - 时间段展示
 * - 课程状态管理
 * - 日期分组显示
 */

<template>
  <!-- 课程时间表组件 -->
  <div class="course-schedule">
    <!-- 预约提示信息 -->
    <div class="schedule-notice">
      <el-alert
        title="只能提前预约下周课程"
        type="warning"
        :closable="false"
        show-icon
      />
    </div>
    
    <!-- 周视图 -->
    <div class="week-view">
      <!-- 视图头部 -->
      <div class="view-header">
        <h3>课程周安排</h3>
        <!-- 日期导航 -->
        <div class="date-navigation">
          <el-button type="primary" size="small" @click="prevWeek">上一周</el-button>
          <span class="current-date">{{ formatWeekDateRange() }}</span>
          <el-button type="primary" size="small" @click="nextWeek" :disabled="isNextWeekDisabled">下一周</el-button>
        </div>
      </div>
      
      <!-- 图例说明 -->
      <div class="schedule-legend">
        <div class="legend-item">
          <div class="legend-color available-color"></div>
          <span>可预约</span>
        </div>
        <div class="legend-item">
          <div class="legend-color unavailable-color"></div>
          <span>不可预约</span>
        </div>
      </div>
      
      <!-- 基于精确时间的课程表 -->
      <div class="timeline-calendar">
        <!-- 时间轴侧边栏 -->
        <div class="timeline-sidebar">
          <div class="day-header-placeholder"></div>
          <div class="timeline-hours">
            <div v-for="hour in hours" :key="hour" class="timeline-hour">
              {{ hour }}:00
            </div>
          </div>
        </div>
        
        <!-- 日期列 -->
        <div class="timeline-days">
          <!-- 表头 -->
          <div class="timeline-header">
            <div v-for="(day, index) in 7" :key="index" class="day-header" :class="{ 'current-day': isCurrentDay(index) }">
              {{ getDayLabel(getCurrentWeekDay(index)) }}
              <div class="day-date">{{ formatDayDate(index) }}</div>
            </div>
          </div>
          
          <!-- 时间格子 -->
          <div class="timeline-grid">
            <div v-for="(day, dayIndex) in 7" :key="dayIndex" class="day-column">
              <!-- 小时背景格子 -->
              <div v-for="hour in hours" :key="`${dayIndex}-${hour}`" 
                class="time-cell"
                :class="{ 'past-time': isPastTime(dayIndex, hour) }">
              </div>
              
              <!-- 课程安排 -->
              <template v-for="(schedule, index) in getDaySchedules(dayIndex)" :key="`schedule-${dayIndex}-${index}`">
                <div 
                  v-if="!isPastTimeRange(dayIndex, schedule.startTime)"
                  :class="[schedule.status === 0 ? 'available-schedule-event' : 'unavailable-schedule-event']"
                  :style="[
                    calculateTimeSlotStyle(schedule.startTime, schedule.endTime),
                    schedule.status === 0 ? { cursor: 'pointer' } : {}
                  ]"
                  @click="schedule.status === 0 && handleBookCourse(schedule)"
                >
                  <div class="event-time">{{ formatTime(schedule.startTime) }} - {{ formatTime(schedule.endTime) }}</div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { ElAlert, ElButton } from 'element-plus'
import { ElMessage } from 'element-plus'
import { bookCourse } from '@/api/course'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

/**
 * 课程时间表组件
 * 功能：
 * 1. 展示课程周视图，包括时间轴和课程安排
 * 2. 支持周导航，可以查看当前周和下一周的课程安排
 * 3. 显示教师可用时间，支持课程预约
 * 4. 提供课程时间表展示，包括可预约和不可预约状态
 * 5. 支持响应式布局，适配不同屏幕尺寸
 */
export default {
  name: 'CourseSchedule',
  
  components: {
    ElAlert,
    ElButton
  },
  
  props: {
    /**
     * 教师可用时间列表
     */
    teacherAvailabilities: {
      type: Array,
      required: true
    },
    /**
     * 教师课程安排列表
     */
    teacherSchedule: {
      type: Array,
      required: true
    },
    /**
     * 课程表数据
     */
    courseTableData: {
      type: Array,
      default: () => []
    },
    /**
     * 课程ID
     * @type {string|number}
     * @required
     */
    courseId: {
      type: [String, Number],
      required: true
    },
    /**
     * 课程时间表数据
     * @type {Array}
     * @required
     */
    schedules: {
      type: Array,
      required: true
    }
  },
  
  setup(props) {
    const router = useRouter()
    // 当前选中的周
    const currentDate = ref(new Date())
    // 跟踪当前显示的是第几周（0表示当前周，1表示下一周）
    const weekOffset = ref(0)
    
    // 小时范围（用于周视图）
    const hours = ref([8, 10, 12, 14, 16, 18, 20, 22])
    
    // 星期几标签
    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    
    /**
     * 格式化日期，例如 "2025-03-26" => new Date()
     * @param {string} dateString - 日期字符串，格式为YYYY-MM-DD
     * @returns {Date|null} 日期对象或null
     */
    const parseDate = (dateString) => {
      if (!dateString) return null
      return new Date(dateString + 'T00:00:00')
    }
    
    /**
     * 日期格式化为 YYYY-MM-DD
     * @param {Date} date - 日期对象
     * @returns {string} 格式化后的日期字符串
     */
    const formatDate = (date) => {
      if (!date) return ''
      return dayjs(date).format('YYYY-MM-DD')
    }
    
    /**
     * 获取周视图的开始日期（当天）
     * @returns {Date} 周开始日期
     */
    const weekStartDate = computed(() => {
      const now = new Date()
      const date = new Date(currentDate.value)
      
      // 如果是初始周，从今天开始
      if (date.getTime() === new Date(new Date().setHours(0, 0, 0, 0)).getTime()) {
        return now
      }
      
      return date
    })
    
    /**
     * 从当前周几获取实际星期几索引（0-6）
     * @param {number} dayIndex - 周内索引（0-6）
     * @returns {number} 星期几索引（0-6）
     */
    const getCurrentWeekDay = (dayIndex) => {
      const date = getDayDate(dayIndex)
      return date.getDay()
    }
    
    /**
     * 获取指定索引的日期
     * @param {number} dayIndex - 周内索引（0-6）
     * @returns {Date} 对应的日期对象
     */
    const getDayDate = (dayIndex) => {
      const date = new Date(weekStartDate.value)
      date.setDate(date.getDate() + dayIndex)
      return date
    }
    
    /**
     * 时间格式化 (将 "09:00:00" 转换为 "09:00")
     * @param {string} timeString - 时间字符串
     * @returns {string} 格式化后的时间字符串
     */
    const formatTime = (timeString) => {
      if (!timeString) return ''
      return timeString.substring(0, 5)
    }
    
    /**
     * 格式化小时为时间范围
     * @param {number} hour - 小时
     * @returns {string} 格式化后的时间范围
     */
    const formatHourRange = (hour) => {
      const nextHour = hour + 2;
      return `${hour}:00-${nextHour}:00`;
    }
    
    /**
     * 格式化时间范围
     * @param {Object} item - 包含startTime和endTime的对象
     * @returns {string} 格式化后的时间范围
     */
    const formatTimeRange = (item) => {
      if (!item) return ''
      return `${formatTime(item.startTime)} - ${formatTime(item.endTime)}`
    }
    
    /**
     * 获取周几标签
     * @param {number} dayIndex - 星期几索引（0-6）
     * @returns {string} 星期几标签
     */
    const getDayLabel = (dayIndex) => {
      return weekDays[dayIndex]
    }
    
    /**
     * 格式化日期
     * @param {number} dayIndex - 周内索引（0-6）
     * @returns {string} 格式化后的日期字符串
     */
    const formatDayDate = (dayIndex) => {
      const date = getDayDate(dayIndex)
      return `${date.getMonth() + 1}月${date.getDate()}日`
    }
    
    /**
     * 检查是否是当前日期
     * @param {number} dayIndex - 周内索引（0-6）
     * @returns {boolean} 是否是当前日期
     */
    const isCurrentDay = (dayIndex) => {
      const today = new Date()
      const dayDate = getDayDate(dayIndex)
      return today.getFullYear() === dayDate.getFullYear() && 
             today.getMonth() === dayDate.getMonth() && 
             today.getDate() === dayDate.getDate()
    }
    
    /**
     * 检查时间是否已过
     * @param {number} dayIndex - 周内索引（0-6）
     * @param {number} hour - 小时
     * @returns {boolean} 时间是否已过
     */
    const isPastTime = (dayIndex, hour) => {
      const now = new Date()
      const dayDate = getDayDate(dayIndex)
      
      // 如果日期已过，时间肯定已过
      if (dayDate < new Date(now.getFullYear(), now.getMonth(), now.getDate())) {
        return true
      }
      
      // 如果是今天，检查小时
      if (isCurrentDay(dayIndex)) {
        return hour < now.getHours()
      }
      
      return false
    }
    
    /**
     * 格式化周日期范围
     * @returns {string} 格式化后的周日期范围
     */
    const formatWeekDateRange = () => {
      const start = weekStartDate.value
      const end = new Date(start)
      end.setDate(end.getDate() + 6)
      
      return `${start.getFullYear()}年${start.getMonth() + 1}月${start.getDate()}日 - ${end.getFullYear()}年${end.getMonth() + 1}月${end.getDate()}日`
    }
    
    /**
     * 切换到上一周
     */
    const prevWeek = () => {
      if (weekOffset.value > 0) {
        weekOffset.value -= 1
        const newDate = new Date()
        newDate.setDate(newDate.getDate() + (weekOffset.value * 7))
        currentDate.value = newDate
      }
    }
    
    /**
     * 切换到下一周
     */
    const nextWeek = () => {
      if (weekOffset.value < 1) {  // 限制只能查看下一周
        weekOffset.value += 1
        const newDate = new Date()
        newDate.setDate(newDate.getDate() + (weekOffset.value * 7))
        currentDate.value = newDate
      }
    }
    
    /**
     * 计算"下一周"按钮是否禁用
     * @returns {boolean} 是否禁用
     */
    const isNextWeekDisabled = computed(() => {
      return weekOffset.value >= 1
    })
    
    /**
     * 检查指定日期和小时是否有可用性安排
     * @param {number} dayIndex - 周内索引（0-6）
     * @param {number} hour - 小时
     * @returns {boolean} 是否有可用性安排
     */
    const hasAvailability = (dayIndex, hour) => {
      return !!getAvailabilityAtHour(dayIndex, hour)
    }
    
    /**
     * 获取指定日期和小时的可用性安排
     * @param {number} dayIndex - 周内索引（0-6）
     * @param {number} hour - 小时
     * @returns {Object|null} 可用性安排对象或null
     */
    const getAvailabilityAtHour = (dayIndex, hour) => {
      // 将日历索引转换为API使用的dayOfWeek
      // API中：1=周一，2=周二，...，6=周六，7=周日
      // 日历索引：0=周日，1=周一，...，6=周六
      let dayOfWeek = dayIndex
      if (dayIndex === 0) dayOfWeek = 7 // 将周日索引0转为7
      else dayOfWeek = dayIndex // 其他日期保持不变
      
      const availability = props.teacherAvailabilities.find(avail => {
        // 匹配星期几
        if (avail.dayOfWeek !== dayOfWeek) {
          return false
        }
        
        const startHour = parseInt(avail.startTime.split(':')[0])
        const endHour = parseInt(avail.endTime.split(':')[0])
        
        // 如果结束时间分钟不为0，需要考虑
        const endMinutes = parseInt(avail.endTime.split(':')[1])
        const adjustedEndHour = endMinutes > 0 ? endHour + 1 : endHour
        
        return hour >= startHour && hour < adjustedEndHour
      })
      
      return availability
    }
    
    /**
     * 获取指定日期和小时的课程安排
     * @param {number} dayIndex - 周内索引（0-6）
     * @param {number} hour - 小时
     * @returns {Array} 课程安排数组
     */
    const getScheduleAtHour = (dayIndex, hour) => {
      const currentDay = getDayDate(dayIndex)
      const currentDayString = formatDate(currentDay)
      const schedules = []
      
      // 遍历所有课程安排
      props.teacherSchedule.forEach(schedule => {
        // 解析日期
        const scheduleDate = parseDate(schedule.date)
        if (!scheduleDate) return
        
        let matches = false
        
        // 检查是否为当天课程
        if (schedule.repeatType === 'once' && schedule.date === currentDayString) {
          matches = true
        }
        // 检查是否为每日重复课程
        else if (schedule.repeatType === 'daily' && scheduleDate <= currentDay) {
          // 检查是否在重复结束日期之前
          if (schedule.repeatEndDate && parseDate(schedule.repeatEndDate) < currentDay) {
            return
          }
          matches = true
        }
        // 检查是否为每周重复课程（同一天）
        else if (schedule.repeatType === 'weekly' && scheduleDate <= currentDay && 
                 scheduleDate.getDay() === currentDay.getDay()) {
          // 检查是否在重复结束日期之前
          if (schedule.repeatEndDate && parseDate(schedule.repeatEndDate) < currentDay) {
            return
          }
          matches = true
        }
        // 检查是否为每月重复课程（同一天）
        else if (schedule.repeatType === 'monthly' && scheduleDate <= currentDay && 
                 scheduleDate.getDate() === currentDay.getDate()) {
          // 检查是否在重复结束日期之前
          if (schedule.repeatEndDate && parseDate(schedule.repeatEndDate) < currentDay) {
            return
          }
          matches = true
        }
        
        // 如果匹配了日期，再检查小时
        if (matches) {
          const startHour = parseInt(schedule.startTime.split(':')[0])
          const endHour = parseInt(schedule.endTime.split(':')[0])
          const endMinutes = parseInt(schedule.endTime.split(':')[1])
          
          // 如果结束分钟不是0，需要考虑下一个小时
          const adjustedEndHour = endMinutes > 0 ? endHour + 1 : endHour
          
          // 检查是否在当前小时内
          if (hour >= startHour && hour < adjustedEndHour) {
            schedules.push(schedule)
          }
        }
      })
      
      return schedules.length > 0 ? schedules : []
    }
    
    /**
     * 获取指定日期所有的课程安排
     * @param {number} dayIndex - 周内索引（0-6）
     * @returns {Array} 课程安排数组
     */
    const getDaySchedules = (dayIndex) => {
      const currentDay = getDayDate(dayIndex)
      const currentDayString = formatDate(currentDay)
      const schedules = []
      
      // 遍历所有课程数据
      if (props.courseTableData && Array.isArray(props.courseTableData)) {
        props.courseTableData.forEach(schedule => {
          // 确保schedule和必要字段存在
          if (schedule && schedule.date && schedule.startTime && schedule.endTime) {
            const scheduleDate = parseDate(schedule.date)
            const repeatEndDate = schedule.repeatEndDate ? parseDate(schedule.repeatEndDate) : null
            
            let shouldInclude = false
            
            // 处理重复类型
            switch (schedule.repeatType) {
              case 'daily':
                // 检查当前日期是否在原始日期和结束日期之间
                shouldInclude = currentDay >= scheduleDate && 
                              (!repeatEndDate || currentDay <= repeatEndDate)
                break
                
              case 'weekly':
                // 检查是否是同一个星期几，且在日期范围内
                shouldInclude = currentDay >= scheduleDate && 
                              (!repeatEndDate || currentDay <= repeatEndDate) &&
                              currentDay.getDay() === scheduleDate.getDay()
                break
                
              case 'monthly':
                // 检查是否是同一个日期，且在日期范围内
                shouldInclude = currentDay >= scheduleDate && 
                              (!repeatEndDate || currentDay <= repeatEndDate) &&
                              currentDay.getDate() === scheduleDate.getDate()
                break
                
              default:
                // 对于一次性课程或未指定重复类型的课程，直接比较日期
                shouldInclude = schedule.date === currentDayString
            }
            
            if (shouldInclude) {
              schedules.push({
                ...schedule,
                date: currentDayString // 使用当前日期而不是原始日期
              })
            }
          }
        })
      }

      // 处理同一时间段的课程
      const timeSlotMap = new Map()
      
      schedules.forEach(schedule => {
        const timeKey = `${schedule.startTime}-${schedule.endTime}`
        if (!timeSlotMap.has(timeKey)) {
          timeSlotMap.set(timeKey, [])
        }
        timeSlotMap.get(timeKey).push(schedule)
      })

      // 对每个时间段选择最合适的课程
      const finalSchedules = []
      timeSlotMap.forEach((schedulesInSlot) => {
        if (schedulesInSlot.length > 0) {
          // 按status排序，优先选择status值较大的课程
          const sortedSchedules = schedulesInSlot.sort((a, b) => b.status - a.status)
          finalSchedules.push(sortedSchedules[0])
        }
      })
      
      return finalSchedules
    }
    
    /**
     * 获取课程安排类型的显示文本
     * @param {Object} schedule - 课程安排对象
     * @returns {string} 显示文本
     */
    const getScheduleTypeText = (schedule) => {
      if (!schedule) return ''
      
      if (schedule.status === 1) {
        return '可预约'
      } else {
        return '不可预约'
      }
    }
    
    /**
     * 计算可用时间块的样式
     * @param {Object} availability - 可用性对象
     * @returns {Object} 样式对象
     */
    const calculateAvailabilityStyle = (availability) => {
      if (!availability) return {}
      
      const startHour = parseInt(availability.startTime.split(':')[0])
      const startMinute = parseInt(availability.startTime.split(':')[1])
      const endHour = parseInt(availability.endTime.split(':')[0])
      const endMinute = parseInt(availability.endTime.split(':')[1])
      
      // 计算高度百分比 (每小时高度为50%，因为我们现在是2小时一个间隔)
      const startPercent = (startMinute / 60) * 50 + (startHour % 2) * 50
      const durationHours = (endHour - startHour) + (endMinute - startMinute) / 60
      const heightPercent = durationHours * 50
      
      return {
        top: `${startPercent}%`,
        height: `${heightPercent}%`,
        backgroundColor: 'rgba(64, 158, 255, 0.7)'
      }
    }
    
    /**
     * 计算课程安排时间块的样式
     * @param {Object} schedule - 课程安排对象
     * @returns {Object} 样式对象
     */
    const calculateScheduleStyle = (schedule) => {
      if (!schedule) return {}
      
      const startHour = parseInt(schedule.startTime.split(':')[0])
      const startMinute = parseInt(schedule.startTime.split(':')[1])
      const endHour = parseInt(schedule.endTime.split(':')[0])
      const endMinute = parseInt(schedule.endTime.split(':')[1])
      
      // 计算高度百分比 (每小时高度为50%，因为我们现在是2小时一个间隔)
      const startPercent = (startMinute / 60) * 50 + (startHour % 2) * 50
      const durationHours = (endHour - startHour) + (endMinute - startMinute) / 60
      const heightPercent = durationHours * 50
      
      return {
        top: `${startPercent}%`,
        height: `${heightPercent}%`,
        backgroundColor: 'rgba(255, 152, 0, 0.7)'
      }
    }
    
    /**
     * 检查是否应该显示可用性
     * @param {Object} availability - 可用性对象
     * @param {number} dayIndex - 周内索引（0-6）
     * @returns {boolean} 是否应该显示
     */
    const shouldShowAvailability = (availability, dayIndex) => {
      const day = getDayDate(dayIndex)
      const dayOfWeek = day.getDay()
      
      // 对于teacherAvailabilities，我们需要检查dayOfWeek是否匹配
      return availability.dayOfWeek === (dayOfWeek === 0 ? 7 : dayOfWeek)
    }
    
    /**
     * 检查时间范围是否已过
     * @param {number} dayIndex - 周内索引（0-6）
     * @param {string} time - 时间字符串
     * @returns {boolean} 时间范围是否已过
     */
    const isPastTimeRange = (dayIndex, time) => {
      const now = new Date()
      const dayDate = getDayDate(dayIndex)
      
      // 如果日期已过，时间肯定已过
      if (dayDate < new Date(now.getFullYear(), now.getMonth(), now.getDate())) {
        return true
      }
      
      // 如果是今天，检查小时
      if (isCurrentDay(dayIndex)) {
        const hour = parseInt(time.split(':')[0])
        return hour < now.getHours()
      }
      
      return false
    }
    
    /**
     * 计算时间槽的样式
     * @param {string} startTime - 开始时间
     * @param {string} endTime - 结束时间
     * @returns {Object} 样式对象
     */
    const calculateTimeSlotStyle = (startTime, endTime) => {
      // 解析时间
      const startHour = parseInt(startTime.split(':')[0])
      const startMinute = parseInt(startTime.split(':')[1])
      const endHour = parseInt(endTime.split(':')[0])
      const endMinute = parseInt(endTime.split(':')[1])
      
      // 计算相对于一天的位置（以小时为单位）
      const firstHour = hours.value[0] // 例如 8点
      const lastHour = hours.value[hours.value.length - 1] + 1 // 例如 23点
      const dayDuration = lastHour - firstHour // 例如 15小时
      
      // 计算开始和结束的相对位置
      const startPosition = (startHour - firstHour) + (startMinute / 60)
      const endPosition = (endHour - firstHour) + (endMinute / 60)
      const duration = endPosition - startPosition
      
      // 转换为百分比位置
      const top = (startPosition / dayDuration) * 100
      const height = (duration / dayDuration) * 100
      
      return {
        top: `${top}%`,
        height: `${height}%`,
      }
    }
    
    /**
     * 处理预约课程
     * @param {Object} schedule - 课程安排对象
     */
    const handleBookCourse = async (schedule) => {
      try {
        const appointmentData = {
          courseId: props.courseId,
          scheduleId: schedule.scheduleId,
          appointmentDate: schedule.date,
          startTime: schedule.startTime,
          endTime: schedule.endTime
        }
        
        const response = await bookCourse(appointmentData)
        
        if (response.code === 200) {
          ElMessage.success('预约成功')
          
          const orderData = response.data
          const ordersViewData = {
            courseId: props.courseId,
            scheduleId: schedule.scheduleId,
            appointmentDate: schedule.date,
            startTime: schedule.startTime,
            endTime: schedule.endTime,
            ordersId: orderData.ordersId
          }
          
          localStorage.setItem('currentOrderData', JSON.stringify(ordersViewData))
          
          router.push({
            path: '/order/confirm',
            query: { scheduleId: orderData.scheduleId }
          })
        } else {
          ElMessage.error(response.message || '预约失败')
        }
      } catch (error) {
        ElMessage.error('预约失败，请重试')
      }
    }
    
    return {
      currentDate,
      weekOffset,
      hours,
      weekDays,
      getDayLabel,
      formatDayDate,
      isCurrentDay,
      formatWeekDateRange,
      formatTime,
      formatTimeRange,
      formatHourRange,
      prevWeek,
      nextWeek,
      hasAvailability,
      getAvailabilityAtHour,
      getScheduleAtHour,
      getScheduleTypeText,
      calculateAvailabilityStyle,
      calculateScheduleStyle,
      getCurrentWeekDay,
      isPastTime,
      isNextWeekDisabled,
      formatDate,
      parseDate,
      getDaySchedules,
      shouldShowAvailability,
      isPastTimeRange,
      calculateTimeSlotStyle,
      handleBookCourse
    }
  }
}
</script>

<style scoped>
/* 课程时间表容器 */
.course-schedule {
  margin: 20px 0;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 预约提示信息 */
.schedule-notice {
  margin-bottom: 20px;
}

/* 视图头部 */
.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 10px;
}

/* 视图标题 */
.view-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
}

/* 日期导航 */
.date-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 当前日期 */
.current-date {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

/* 图例说明 */
.schedule-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

/* 图例项 */
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

/* 图例颜色 */
.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

/* 可预约颜色 */
.available-color {
  background-color: #67c23a; /* 绿色 - 可预约 */
}

/* 不可预约颜色 */
.unavailable-color {
  background-color: #409EFF; /* 蓝色 - 不可预约 */
}

/* 基于精确时间的课程表 */
.timeline-calendar {
  display: flex;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  overflow: hidden;
}

/* 时间轴侧边栏 */
.timeline-sidebar {
  width: 80px;
  flex-shrink: 0;
  border-right: 1px solid #EBEEF5;
  background-color: #fafafa;
}

/* 日期头部占位符 */
.day-header-placeholder {
  height: 50px;
  background-color: #f6f6f6;
  border-bottom: 1px solid #EBEEF5;
}

/* 时间轴小时 */
.timeline-hours {
  display: flex;
  flex-direction: column;
}

/* 时间轴小时项 */
.timeline-hour {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #EBEEF5;
  font-size: 12px;
  color: #606266;
}

/* 日期列 */
.timeline-days {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 时间轴表头 */
.timeline-header {
  height: 50px;
  display: flex;
  border-bottom: 1px solid #EBEEF5;
}

/* 日期头部 */
.day-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background-color: #f6f6f6;
  border-right: 1px solid #EBEEF5;
  padding: 8px 0;
}

/* 最后一个日期头部 */
.day-header:last-child {
  border-right: none;
}

/* 当前日期头部 */
.current-day {
  background-color: #409EFF;
  color: white;
}

/* 日期文本 */
.day-date {
  font-size: 12px;
  font-weight: normal;
  margin-top: 2px;
}

/* 时间格子 */
.timeline-grid {
  display: flex;
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* 日期列 */
.day-column {
  flex: 1;
  position: relative;
  border-right: 1px solid #EBEEF5;
  min-height: 450px;
}

/* 最后一个日期列 */
.day-column:last-child {
  border-right: none;
}

/* 时间单元格 */
.time-cell {
  height: 50px;
  border-bottom: 1px solid #EBEEF5;
}

/* 最后一个时间单元格 */
.time-cell:last-child {
  border-bottom: none;
}

/* 已过时间 */
.past-time {
  background-color: rgba(0, 0, 0, 0.03);
  position: relative;
}

/* 已过时间背景 */
.past-time::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.02),
    rgba(0, 0, 0, 0.02) 10px,
    rgba(0, 0, 0, 0.04) 10px,
    rgba(0, 0, 0, 0.04) 20px
  );
  pointer-events: none;
}

/* 可用性事件和课程事件 */
.availability-event, .schedule-event {
  position: absolute;
  left: 5px;
  right: 5px;
  color: white;
  padding: 6px;
  font-size: 12px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

/* 可用性事件和课程事件悬停效果 */
.availability-event:hover, .schedule-event:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* 可用性事件 */
.availability-event {
  background-color: rgba(101, 194, 58, 0.8); /* 绿色 - 可预约时间 */
  z-index: 2;
}

/* 可预约和不可预约课程事件 */
.available-schedule-event, .unavailable-schedule-event {
  position: absolute;
  left: 5px;
  right: 5px;
  color: white;
  padding: 6px;
  font-size: 12px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

/* 可预约和不可预约课程事件悬停效果 */
.available-schedule-event:hover, .unavailable-schedule-event:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* 可预约课程事件 */
.available-schedule-event {
  background-color: rgba(101, 194, 58, 0.8); /* 绿色 - 可预约 */
  z-index: 3;
  transition: all 0.3s ease;
}

/* 可预约课程事件悬停效果 */
.available-schedule-event:hover {
  background-color: rgba(101, 194, 58, 0.9);
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 不可预约课程事件 */
.unavailable-schedule-event {
  background-color: rgba(64, 158, 255, 0.8); /* 蓝色 - 不可预约 */
  z-index: 3;
  cursor: not-allowed;
}

/* 不可预约课程事件悬停效果 */
.unavailable-schedule-event:hover {
  background-color: rgba(64, 158, 255, 0.9);
}

/* 事件时间 */
.event-time {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}

/* 可用性事件、可预约和不可预约课程事件 */
.availability-event, .available-schedule-event, .unavailable-schedule-event {
  padding: 10px 6px;
}

/* 预约按钮 */
.book-button {
  display: none;
}
</style> 